<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单页面</title>

		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div id="app">
			<ul class="layui-nav">
				<li class="layui-nav-item">
					<a href="index.html">主页</a>
				</li>
			
			<li  v-show="!loginflag" class="layui-nav-item" style="margin-left: 400px;">
				<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
			</li>
				<li  v-show="loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
					<dl class="layui-nav-child">
						<dd> <a href="user.html">个人中心</a></dd>
						<dd><a href="javascript:void(0);" onclick="clearAllCookie()">注销</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="order.html">我的订单</a>
					<dl class="layui-nav-child">
						<dd><a href="HistoryOrder.html">历史订单</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="shoppingcart.html">购物车<span class="layui-badge">{{shoppingcartnumber}}</span></a>
				</li>
				<li v-show="$cookies.get('userType')==1" class="layui-nav-item">
					<a href="myShop.html">创建商品</a>
					<dl class="layui-nav-child">
						<dd><a href="myShopOrder.html">商家订单</a></dd>
					</dl>
				</li>
			</ul>
			<div style="margin-bottom:10px;height:30px;width:800px;margin-left: 600px;    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;margin-top:20px;margin-right:0px; line-height: 30px;">
				<span style="margin-top:80px;margin-left:200px;">商品内容</span>
				<span style="margin-left:140px;">单价</span>
				<span style="margin-left:20px;">数量</span>
				<span style="margin-left:20px;">实付款</span>
				<span style="margin-left:30px;">订单状态</span>
				<span style="margin-left:50px;">交易操作</span>
			</div>
			<div class="userOrder-box">
				<div style="text-align: center;" v-if="!OrderList[0]">
				无订单信息
				</div>
				<div class="userOrder-item" v-if="OrderList[0]">
					<div class="userOrder-head">
						<span class="userOrder-orderId">订单号:{{OrderList[0].orderId}}</span>
						<span id="0" class="userOrder-shopName" >{{OrderList[0].shopName}}</span>
						<span class="userOrder-datetime">{{OrderList[0].date}}</span>
					</div>
					<div id="0" class="userOrder-itemImage" @click="goToItem">
						<img  id="0" :src="OrderList[0].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div id="0" class="userOrder-itemName" @click="goToItem"> {{OrderList[0].itemName}}</div>
					<div class="userOrder-price">¥{{OrderList[0].price/OrderList[0].number|keepTwoNum}}</div>
					<div class="userOrder-Number">{{OrderList[0].number}}</div>
					<div class="userOrder-realprice">¥{{OrderList[0].price|keepTwoNum}}</div>
					<div class="userOrder-Status">{{OrderList[0].status|statusFilter}}</div>
					<div class="userOrder-button">
						<button id="0" @click="cancelOrder" class="layui-btn layui-btn-primary" v-if="OrderList[0].status==0" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">退款</button>
						<button id="0" @click="completeOrder" class="layui-btn layui-btn-primary" v-if="OrderList[0].status==1" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">确认收货</button>
					</div>
				</div>
				
				<div class="userOrder-item" v-if="OrderList[1]">
					<div class="userOrder-head">
						<span>订单号:{{OrderList[1].orderId}}</span>
						<span id="1" class="userOrder-shopName" >{{OrderList[1].shopName}}</span>
						<span class="userOrder-datetime">{{OrderList[1].date}}</span>
					</div>
					<div id="1" class="userOrder-itemImage" @click="goToItem">
						<img  id="1" :src="OrderList[1].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div id="1" class="userOrder-itemName" @click="goToItem"> {{OrderList[1].itemName}}</div>
					<div class="userOrder-price">¥{{OrderList[1].price/OrderList[1].number|keepTwoNum}}</div>
					<div class="userOrder-Number">{{OrderList[1].number}}</div>
					<div class="userOrder-realprice">¥{{OrderList[1].price|keepTwoNum}}</div>
					<div class="userOrder-Status">{{OrderList[1].status|statusFilter}}</div>
					<div class="userOrder-button">
						<button id="1" @click="cancelOrder" class="layui-btn layui-btn-primary" v-if="OrderList[1].status==0" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">退款</button>
						<button id="1" @click="completeOrder" class="layui-btn layui-btn-primary" v-if="OrderList[1].status==1" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">确认收货</button>
					</div>
				</div>
				
				
				<div class="userOrder-item" v-if="OrderList[2]">
					<div class="userOrder-head">
						<span class="userOrder-orderId">订单号:{{OrderList[2].orderId}}</span>
						<span id="2" class="userOrder-shopName" >{{OrderList[2].shopName}}</span>
						<span class="userOrder-datetime">{{OrderList[2].date}}</span>
					</div>
					<div id="2" class="userOrder-itemImage" @click="goToItem">
						<img  id="2" :src="OrderList[2].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div id="2" class="userOrder-itemName" @click="goToItem"> {{OrderList[2].itemName}}</div>
					<div class="userOrder-price">¥{{OrderList[2].price/OrderList[2].number|keepTwoNum}}</div>
					<div class="userOrder-Number">{{OrderList[2].number}}</div>
					<div class="userOrder-realprice">¥{{OrderList[2].price|keepTwoNum}}</div>
					<div class="userOrder-Status">{{OrderList[2].status|statusFilter}}</div>
					<div class="userOrder-button">
						<button id="2" @click="cancelOrder" class="layui-btn layui-btn-primary" v-if="OrderList[2].status==0" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">退款</button>
						<button id="2" @click="completeOrder" class="layui-btn layui-btn-primary" v-if="OrderList[2].status==1" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">确认收货</button>
					</div>
				</div>
				
				<div class="userOrder-item" v-if="OrderList[3]">
					<div class="userOrder-head">
						<span class="userOrder-orderId">订单号:{{OrderList[3].orderId}}</span>
						<span id="3" class="userOrder-shopName" >{{OrderList[3].shopName}}</span>
						<span class="userOrder-datetime">{{OrderList[3].date}}</span>
					</div>
					<div id="3" class="userOrder-itemImage" @click="goToItem">
						<img  id="3" :src="OrderList[3].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div id="3" class="userOrder-itemName" @click="goToItem"> {{OrderList[3].itemName}}</div>
					<div class="userOrder-price">¥{{OrderList[3].price/OrderList[3].number|keepTwoNum}}</div>
					<div class="userOrder-Number">{{OrderList[3].number}}</div>
					<div class="userOrder-realprice">¥{{OrderList[3].price|keepTwoNum}}</div>
					<div class="userOrder-Status">{{OrderList[3].status|statusFilter}}</div>
					<div class="userOrder-button">
						<button id="3" @click="cancelOrder" class="layui-btn layui-btn-primary" v-if="OrderList[3].status==0" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">退款</button>
						<button id="3" @click="completeOrder" class="layui-btn layui-btn-primary" v-if="OrderList[3].status==1" style="margin-left:30px;margin-top:30px;width: 94px;height: 38px;">确认收货</button>
					</div>
				</div>
			</div>






			<div id="pageDiv" style="text-align: center;"></div>
			<div style="text-align: center;position: fixed;bottom: 0;width: 100%;" class="layui-bg-gray">Tips：待发货状态需要商家操作订单进行发货</div>
		</div>





		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					userShowName: '请登录',
					username: '',
					loginflag: false,
					OrderList: [],
					page: 1,
					haveInit: false,
					shoppingcartnumber: 0
				},
				filters: {
					keepTwoNum: function(value) {
						value = Number(value)
						return value.toFixed(2)
					},
					statusFilter(value) {
						value = Number(value)
						if (value == 0) {
							return "待发货"
						}
						if (value == 1)
							return "待收货"
					}
				},
				methods: {
					cancelOrder: function(obj) {
						layui.use('layer', function() {
							var layer = layui.layer;
							layer.open({
								type: 1,
								title: "信息确认" //不显示标题栏
									,
								closeBtn: false,
								shade: 0.8,
								id: 'LAY_layuipro' //设定一个id，防止重复弹出
									,
								btn: ['确认', '取消'],
								btnAlign: 'c',
								moveType: 1 //拖拽模式，0或者1
									,
								content: '<div style="padding: 76px; line-height: 22px; font-size:15px;background-color: #393D49; color: #fff; font-weight: 300;">是否取消订单？</div>',
								yes: function(index, layero) {
									let param = new URLSearchParams()
									param.append('userId', $cookies.get("userId"))
									param.append('passWord', $cookies.get("passWord"))
									param.append('userName', $cookies.get("userName"))
									param.append('orderId', vm.OrderList[obj.target.id].orderId)
									console.log(param.toString())
									axios.post(URL + '/Order/cancelOrder', param)
										.then(function(response) {
											if (response.data.code == 1) {
												layer.msg("退款成功")
												vm.haveInit = false
												vm.initOrderList()
											} else if (response.data.code == 0) {
												console.log(response)
												console.log(response.data.msg)

											}
										})
										.catch(function(error) {
											console.log(error);
										});
									layer.close(index);
								},
								btn2: function(index, layero) {}
							});
						});
					},completeOrder: function(obj) {
						layui.use('layer', function() {
							var layer = layui.layer;
							layer.open({
								type: 1,
								title: "信息确认" //不显示标题栏
									,
								closeBtn: false,
								shade: 0.8,
								id: 'LAY_layuipro' //设定一个id，防止重复弹出
									,
								btn: ['确认', '取消'],
								btnAlign: 'c',
								moveType: 1 //拖拽模式，0或者1
									,
								content: '<div style="padding: 76px; line-height: 22px; font-size:15px;background-color: #393D49; color: #fff; font-weight: 300;">是否确认收货？</div>',
								yes: function(index, layero) {
									let param = new URLSearchParams()
									param.append('userId', $cookies.get("userId"))
									param.append('passWord', $cookies.get("passWord"))
									param.append('userName', $cookies.get("userName"))
									param.append('orderId', vm.OrderList[obj.target.id].orderId)
									console.log(param.toString())
									axios.post(URL + '/Order/completeOrder', param)
										.then(function(response) {
											if (response.data.code == 1) {
												vm.haveInit = false
													layer.msg("交易完成，可以在“历史订单”中查看交易历史")
														vm.initOrderList()
											} else if (response.data.code == 0) {
												console.log(response)
												console.log(response.data.msg)
											}
										})
										.catch(function(error) {
											console.log(error);
										});
									layer.close(index);
								},
								btn2: function(index, layero) {}
							});
						});
					},
					getpage: function(total, curr) {
						layui.use('laypage', function() {
							var laypage = layui.laypage;

							//执行一个laypage实例
							laypage.render({
								elem: 'pageDiv', //注意，这里的 test1 是 ID，不用加 # 号
								count: total, //数据总数，从服务端得到
								limit: 4,
								jump: function(obj, first) { //obj为当前页的属性和方法，第一次加载first为true
									console.log("laypage()")
									console.log(obj)
									//非首次加载 do something			
									vm.page = obj.curr;
									if (!first) {
										vm.initOrderList()
									}

								},


							});
						})
					},
					loginplease: function() {
						if (this.loginflag)
							window.location.href = 'user.html'; //跳转主页
						else
							window.location.href = 'login.html'; //跳转主页
					},
					initOrderList: function() {
						let param = new URLSearchParams()
						param.append('userId', $cookies.get("userId"))
						param.append('passWord', $cookies.get("passWord"))
						param.append('userName', $cookies.get("userName"))
						param.append('Page', vm.page)
						console.log(param.toString())
						//加载订单列表
						axios.post(URL + '/Order/selectOrderList', param)
							.then(function(response) {
								if (response.data.code == 1) {
									console.log("查询订单成功")
									console.log(response.data.result)
									if (!vm.haveInit) {
										console.log("执行lay")
										console.log(response.data.result)
										if(response.data.count==null)
										response.data.count=0
										vm.getpage(response.data.count, 1)
										vm.haveInit = true
									}
									vm.OrderList= response.data.result

								} else if (response.data.code == 0) {
									console.log(response)
									console.log(response.data.msg)

								}
							})
							.catch(function(error) {
								console.log(error);
							});

					},
					goToItem: function(obj) {
						console.log("点击的id为" + obj.target.id)
						window.location.href = "item.html?itemId=" + this.OrderList[obj.target.id].itemId;
					},
				},

				created: function() {
					checklogin().then(x => {
						if (x) {

							if ($cookies.get("userName") != null)
								this.username = $cookies.get("userName")
							if ($cookies.get("userShowName") != null)
								this.userShowName = $cookies.get("userShowName")
							this.loginflag = $cookies.get("loginflag")
							vm.initOrderList()

						} else {
						layui.use('layer', function(){
							  var layer = layui.layer;
							  layer.open({
								title:"提示"//不显示标题栏
							    ,closeBtn: false
							    ,shade: 0.8
							    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
							    ,btn: ['确认', '取消']
							    ,btnAlign: 'c'
							    ,moveType: 1//拖拽模式，0或者1
								,type:0
							    ,content: '请重新登陆再使用订单功能'
							    ,yes: function(index, layero){
							     	window.location.href = 'login.html'
								   layer.close(index);
							      },
								  btn2: function(index, layero){
									  	window.location.href = 'index.html'
							  }
							  });
							});    
						}
					})

				},
				mounted: function() {


				}


			})
		</script>


		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});
		</script>

	</body>
</html>
